<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
     <el-row>
         <el-col :span="22">
        <el-form-item label="二级机构" prop="departmentOrgId">
         <treeselect :default-expand-level="1"  v-model="form.departmentOrgId" :options="deptOptions" :show-count="true" placeholder="请选择机构" size="small" class="form_long"/>
        </el-form-item>
        </el-col>
     </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="预算经费" prop="budgetFunds">
            <el-input v-model="form.budgetFunds" placeholder="请输入预算经费" oninput="value=value.replace(/[^\d]/g,'')" class="form_short">
            <template slot="append">万元</template>
            </el-input>
          </el-form-item>
          </el-col>
           <el-col :span="11">
            <el-form-item label="项目分类" prop="projectType">
              <el-select v-model="form.projectType" placeholder="请选择项目分类" class="form_short">
                <el-option
                  v-for="dict in projectTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人工号" prop="projectOwnerId">
             <el-input v-model="form.projectOwnerId" placeholder="请输入负责人工号" type="string" size="small" class="form_short" @blur="searchUser" @keyup.enter.native="searchUser"/>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="负责人姓名" >
            <el-input v-model="form.projectLeader" placeholder="输入工号自动带入" disabled  class="form_short"/>
          </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <el-form-item label="负责人职称" >
            <el-input v-model="form.ownerTitle" placeholder="输入职称"  class="form_long"/>
          </el-form-item>
          </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="负责人电话" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入负责人电话" class="form_short"/>
          </el-form-item>
          </el-col>
        <el-col :span="11">
          <el-form-item label="负责人邮箱" prop="ownerEmail">
            <el-input v-model="form.ownerEmail" placeholder="请输入负责人邮箱" class="form_short"/>
          </el-form-item>
          </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {getByNo} from "@/api/labbase/instrumentation"
import {searchEmployee} from "@/api/labdata/employee";
import {treeselect } from "@/api/labdata/orgnization";
import Treeselect from "@riophae/vue-treeselect";
  export default {
    name: "ProjectInstrument",
    components:{Treeselect},
    data() {
      return {
        //项目类型
        projectTypeOptions: [],
        // 部门树选项
        deptOptions: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          projectStart: [
            { required: true, message: "项目开始日期不能为空", trigger: "blur" }
          ],
          projectEnd: [
            { required: true, message: "项目结束日期不能为空", trigger: "blur" }
          ],
           departmentOrgId: [
            { required: true, message: "所在部门不能为空", trigger: "blur" }
          ],
          budgetFunds: [
          { required: true, message: "预算经费不能为空", trigger: "blur" }
        ],
        projectOwnerId: [
          { required: true, message: "工(学)号不能为空", trigger: "blur" }
        ],
        ownerEmail: [
         { required: true, message: '请输入负责人邮箱地址', trigger: 'blur' },
         { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        contactPhone: [
         { required: true, message: '请输入负责人电话', trigger: 'blur' },
         {
           pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: '请输入正确的手机号码或者座机号',
          }
        ],
        }
      };
    },
    props:{
      instrument:Object,
    },
    created() {
      this.getTreeselect();
      this.getDicts("project_Instrument_project_type").then(response => {
      this.projectTypeOptions = response.data;
    });
      if(this.instrument){
        this.form = this.instrument;
        this.searchUser();
      }else{
        this.form  = {};
      }
    },
    methods: {
      getInstrument(){
        return this.form;
      },
      // 输入工号搜索
      searchUser(){
        // console.log(this.form.projectOwnerId);
        if(!this.form.projectOwnerId){
          this.form.projectLeader = null;
          this.form.ownerTitle = null;
          return;
        }
         searchEmployee(this.form.projectOwnerId).then(response=>{
           let searchResult = response.data;
           if(searchResult){
             this.form.projectLeader = searchResult.nickName;
             this.form.ownerTitle =searchResult.title
           }else{
             this.form.projectLeader = null;
             this.form.ownerTitle = null;
           }
           //强制刷新
           this.$forceUpdate();
          });
      },

       /** 查询部门下拉树结构 */
       getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },

    }
  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 505px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
